<template>
    <div class="checkIn">
        <div class="tit">感谢惠顾</div>
        <header>
            <img src="../../../static/img/watsons/watsons_logo .png" alt="">
        </header>
        <div class="pic_left" @click="drink">
                <img src="http://file.rzkeji.com/web/f6_activity/bottle_check.png" alt="">
                <img src="http://file.rzkeji.com/web/f6_activity/cap.png" alt="">
                <img src="../../../static/img/watsons/click.png" alt="" v-if="!drink_already">
            </div>
        <div class="pic">
            <div class="pic_right" >
                <div>如果你已经饮用</div>
                <img src="../../../static/img/watsons/watsons_logo .png" alt="">
                <div v-if="!drink_already">请点击左边瓶子<br> 获取17.28克高膳食纤维<br> 再测试一下<br> 今天摄入的膳食纤维<br> 是否足够？</div>
                <div class="drink_already" v-else>
                    <div><div>摄取 <span>17.28克</span></div><div>高膳食纤维</div></div>
                    <div class="drink_tit">点击测试 <br/>今天的膳食纤维摄入量 </div>
                </div>
            </div>
        </div>
        <div class="logo">
            <img src="../../../static/img/watsons/watsons_logo2.png" alt="">
        </div>
        <div class="btn">
           <div @click="caculate">
               <div>点击</div>
                <div>测试</div>
           </div>
       </div>
    </div>
</template>
<script>
export default {
    name:'checkIn',
    data() {
        return {
            drink_already:false
        }
    },
    methods: {
        caculate(){
            var goals='';
            if(this.drink_already==true){
                goals=17.82
            }else{
                goals=0
            }
            this.$router.replace({name:'caculate',params:{'goals':goals,'from':'checkIn'}})
        },
        drink(){
            this.drink_already=true
        }
    },
}
</script>
<style lang="scss" scoped>
@import '../../common/css/index.scss';
    .checkIn{
        width: 100%;
        height: 100%;
        background:url('http://file.rzkeji.com/web/f6_activity/bg1.jpg');
        background-size: 100%;
    }
    .tit{
        padding:40px 0;
        font-size: 35px;
    }
    header{
        & img{
            margin:5px 0;
            width: 360px;
        }
    }
    .pic_left{
            position: absolute;
            margin-left: 80px;
            img:nth-child(1){
                width: 140px;
            }
            img:nth-child(2){
                width: 90px;
                position: absolute;
                bottom:10px;
                left: 120px;
                z-index: 99;
                // margin-left: 150px;
            }
            img:nth-child(3){
                width: 90px;
                position: absolute;
                top:120px;
                left: 80px;
                z-index:99;
                // margin-left: 150px;
            }
        }
    .pic{
        width: 100%;
        display: flex;
        position: relative;

        background:url('http://file.rzkeji.com/web/f6_activity/checkIn/circle.png');
        background-size:cover; 
        background-position: -50px 130%;
        .pic_right{
            position: relative;
            left: 180px;
            margin-right: 80px;
            z-index:999;
            width: 500px;
            height: 600px;
            font-size: 30px;
            img{
                width:300px;
            }
            div:nth-child(1){
                margin:60px 0;
            }
            .drink_already{
                div{
                    margin:0 0;
                }
                div:nth-child(1){
                    font-size: 50px;
                    span{
                        font-size: 60px;
                    }
                }
                div:nth-child(2){
                    font-size: 45px;
                }
                .drink_tit{
                    font-size: 25px !important;
                    color:#963b41;
                }
            }
        }
    }
     .logo{
        margin-top:-80px;
        img{
            width: 120px;
        }
    }
    .btn{
        position: relative;
        margin-top:-15px;

        &>div{
               background:url('../../../static/img/watsons/watsons_btn.png');
                background-size:100% 100%;
                display: flex;
                justify-content: center;
                align-content: center;
                flex-wrap: wrap;
                div{
                    width: 100%;
                }
           }
        
    }
</style>
